<template>
  <div class="hospitailDetail">
    <my-header :h="headMsg"></my-header>
    <div class="img-banner">
      <span class="badge">{{badge}}</span>
    </div>
    <div class="simple-intro">
      <div class="hospital-name">{{hospitalName}}</div>
      <div class="hospital-tel">
        <img class="int" src="../assets/ico-introduce.png" alt>
        <span style="color:#2D7FFC" @click="introVisible=!introVisible">医院简介</span>
        <img class="tel" src="../assets/ico-tel.png" alt>
        {{hospitalTel}}
      </div>
    </div>
    <div class="history-detail" v-show="introVisible">
      <span>医院介绍</span>
      <p></p>
    </div>
    <div class="opera">
      <div class="item">
        <img src="../assets/appointment.png" alt>
        <span>按科室挂号</span>
        <div class="arrow"></div>
      </div>
      <div class="item" @click="$router.push('/doctorSearch')">
        <img src="../assets/doctor.png" alt>
        <span>按医师挂号</span>
        <div class="arrow"></div>
      </div>
    </div>
  </div>
</template>

<script>
import myHeader from "./base/my-header";

export default {
  components: { myHeader },
  data() {
    return {
      headMsg: {
        title: "医院详情",
        fixed: true
      },
      introVisible: false,
      badge: "三级甲等",
      hospitalName: "云南省第一人民医院",
      hospitalTel: "0871-63636363",
      hospital: this.$route.params.id
    };
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.history-detail {
  margin-top: 0.8rem;
  background: white;
  padding: 0.75rem;
  span {
    font-size: 0.85rem;
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    color: rgba(0, 0, 0, 1);
  }
  p {
    font-size: 0.85rem;
    font-family: PingFang-SC-Regular;
    font-weight: 400;
    color: rgba(17, 17, 17, 1);
    line-height: 1.25rem;
  }
}

.opera {
  margin-top: 0.8rem;

  .item {
    display: flex;
    align-items: center;
    padding: 0 0.725rem;
    height: 3rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px -1px 0px 0px rgba(216, 222, 235, 1),
      0px 1px 0px 0px rgba(216, 222, 235, 1);
    img {
      width: 2rem;
      height: 2rem;
      margin-right: 0.325rem;
      background: rgba(49, 114, 245, 1);
      border-radius: 0.25rem;
    }
    span {
      flex: 1;
      font-size: 0.85rem;
      font-family: PingFang-SC-Regular;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
    .arrow {
      width: 0.5rem;
      height: 0.5rem;
      border-bottom: 1px solid #c7c7cc;
      border-left: 1px solid #c7c7cc;
      transform: rotate(225deg);
    }
  }
}

.img-banner {
  height: 6rem;
  position: relative;
  .badge {
    background: rgba(0, 0, 0, 1);
    opacity: 0.6;
    border-radius: 0.25rem;
    position: absolute;
    bottom: 0.45rem;
    left: 0.7rem;
    padding: 0 0.6em;
    font-size: 0.65rem;
    font-family: PingFang-SC-Regular;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 1.5em;
  }
}
.simple-intro {
  background-color: white;
  height: 4rem;
  box-shadow: 0px 1px 0px 0px rgba(216, 222, 235, 1);
  padding: 0 0.725rem;
  .hospital-name {
    font-size: 0.85rem;
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    line-height: 2.5rem;
  }
  .hospital-tel {
    font-size: 0.65rem;
    font-family: PingFang-SC-Regular;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 1.85rem;
    .int {
      width: 0.7rem;
      height: 0.675rem;
    }
    .tel {
      width: 0.8rem;
      height: 0.575rem;
    }
  }
}
</style>

<style>
body {
  background-color: rgb(237, 242, 252);
}
</style>
